<template>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" @change="allChose()" v-model="allChoseButton">全选</th>
                <th>商品</th>
                <th>单价(元)</th>
                <th>数量</th>
                <th>小计(元)</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <template v-for="item in renderData">
                <tr>
                    <td><input type="checkbox" @change="chooseProduct(item)" v-model="item.isChose"></td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td><button @click="item.number--">-</button>{{ item.number }}<button
                            @click="item.number++">+</button></td>
                    <td>{{ item.price * item.number }}</td>
                    <td><button @click="removeData(item.id)">删除</button></td>
                </tr>
            </template>
            <tr>
                <td colspan="5">
                    <p><span >删除选中商品</span>
                        <span>共{{ shopArray.length }}件商品,已选择{{ choseProducts.length }}件商品</span>
                        <span>合计(不含运费):{{ totalPrice }}</span>
                        <button @click="pay()">结算</button>
                    </p>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script setup>
import { computed, ref } from 'vue'
const isDisplay = ref('true');
const totalShop = ref([]);
const shopArray = ref([
    { id: 1, name: '苹果', price: 10, number: 10, isChose: false },
    { id: 2, name: '山竹', price: 24, number: 10, isChose: false },
    { id: 3, name: '榴莲', price: 45, number: 1, isChose: false },
    { id: 4, name: '西瓜', price: 2, number: 1, isChose: false }
])
const result = ref(0);
const renderData = computed(() => shopArray.value.filter(item => item.number > 0))
const totalPrice = computed(() => {
    return choseProducts.value.reduce((prev, item) => {
        return item.price * item.number + prev
    }, 0)
});

const choseProducts = ref([]);
const allChoseButton = ref(false);


function pay(){
    shopArray.value = shopArray.value.filter(item=>!item.isChose);
    choseProducts.value=[];
}
function allChose() {
    if(choseProducts.value!=shopArray.value){
        shopArray.value.forEach(item=>{
            item.isChose =true;
        })
        choseProducts.value = shopArray.value

    }else{
         shopArray.value.forEach(item=>{
            item.isChose =false;
        })
        choseProducts.value=[];
    }
    allChoseButton.value?allChoseButton.value=true:allChoseButton.value=false;   
}
function chooseProduct(data) {
    choseProducts.value = shopArray.value.filter((item) => item.isChose);
    if(shopArray.value.every(item=>item.isChose==true)){
        allChoseButton.value=true;
        choseProducts.value = shopArray.value;
    }
}

function removeData(id) {
    shopArray.value = shopArray.value.filter(item => {
        return item.id != id
    })
}
// function changeTotalShop(data) {
//     if ((totalShop.value).includes(data)) {
//         totalShop.value = totalShop.value.filter(item => {
//             return item != data
//         })
//         result.value -= data;
//     } else {
//         result.value += data - 0;
//         (totalShop.value).push(data)
//     }

// }



</script>

<style scoped>
td,
th {
    margin: 10px;
    text-align: center;
}

span {
    margin: 20px;
}
</style>